<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <div>
        <label>相机类型：</label>
        <el-radio
          v-model="cameraType"
          label="PerspectiveCamera"
          @change="radioChange"
          >透视相机</el-radio
        >
        <el-radio
          v-model="cameraType"
          label="OrthographicCamera"
          @change="radioChange"
          >正投影相机</el-radio
        >
      </div>
      <el-collapse accordion>
        <div>
          <el-collapse-item
            :title="item.name"
            v-for="(item, key) in properties"
            :key="key"
          >
            <el-col
              v-for="(paramsItem, paramsItemKey) in item.params"
              :key="paramsItemKey"
            >
              <el-col :span="5">
                <span class="vertice-span">{{ paramsItem.name }}</span>
              </el-col>
              <el-col :span="16">
                <el-slider
                  v-model="paramsItem.value"
                  :min="paramsItem.min"
                  :max="paramsItem.max"
                  :step="paramsItem.step"
                  :format-tooltip="formatTooltip"
                ></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{ paramsItem.value }}</span>
              </el-col>
            </el-col>
          </el-collapse-item>
        </div>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

let scene; //场景
let camera; //相机
let renderer; //创建渲染器
let controls; //控制器
export default {
  data() {
    return {
      cameraType: "PerspectiveCamera",
      sliderProperties: {
        position: {
          name: "相机位置-position",
          params: {
            positionX: {
              name: "x",
              value: 120,
              min: -1800,
              max: 1800,
              step: 1,
            },
            positionY: {
              name: "y",
              value: 60,
              min: -1800,
              max: 1800,
              step: 1,
            },
            positionZ: {
              name: "z",
              value: 180,
              min: -1800,
              max: 1800,
              step: 1,
            },
          },
        },
        lookAt: {
          name: "相机方向",
          params: {
            lookAtX: {
              name: "x",
              value: 0,
              min: -180,
              max: 180,
              step: 1,
            },
            lookAtY: {
              name: "y",
              value: 0,
              min: -180,
              max: 180,
              step: 1,
            },
            lookAtZ: {
              name: "z",
              value: 0,
              min: -180,
              max: 180,
              step: 1,
            },
          },
        },
        PerspectiveCameraParams: {
          name: "相机参数",
          params: {
            fov: {
              name: "视场",
              value: 45,
              min: 0,
              max: 360,
              step: 1,
            },
            aspect: {
              name: "长宽比",
              value: 2,
              min: 0.1,
              max: 10,
              step: 0.1,
            },
            near: {
              name: "近面",
              value: 0.1,
              min: 0.1,
              max: 100,
              step: 0.1,
            },
            far: {
              name: "远面",
              value: 1000,
              min: 100,
              max: 10000,
              step: 10,
            },
          },
        },
        OrthographicCameraParams: {
          name: "相机参数",
          params: {
            left: {
              name: "左边界",
              value: -150,
              min: -1000,
              max: 0,
              step: 1,
            },
            right: {
              name: "右边界",
              value: 230,
              min: 0,
              max: 1000,
              step: 1,
            },
            top: {
              name: "上边界",
              value: -50,
              min: -500,
              max: 0,
              step: 1,
            },
            bottom: {
              name: "下边界",
              value: 360,
              min: 0,
              max: 500,
              step: 1,
            },
            near: {
              name: "近面",
              value: 200,
              min: -1000,
              max: 100,
              step: 10,
            },
            far: {
              name: "远面",
              value: 300,
              min: 100,
              max: 10000,
              step: 10,
            },
          },
        },
      },
      planeGeometry: null,
    };
  },
  computed: {
    properties() {
      let obj = {};
      for (let key in this.sliderProperties) {
        if (
          this.sliderProperties[key].name !== "相机参数" ||
          !key.indexOf(this.cameraType)
        ) {
          obj[key] = this.sliderProperties[key];
        }
      }
      return obj;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    formatTooltip(val) {
      return val;
    },
    radioChange(value) {
      if (value === "PerspectiveCamera") {
        this.sliderProperties.lookAt.params.lookAtX.value = 0;
        this.sliderProperties.lookAt.params.lookAtY.value = 0;
        this.sliderProperties.lookAt.params.lookAtZ.value = 0;
      } else {
        this.sliderProperties.lookAt.params.lookAtX.value = 25;
        this.sliderProperties.lookAt.params.lookAtY.value = -135;
        this.sliderProperties.lookAt.params.lookAtZ.value = 70;
      }
    },
    // 初始化
    init() {
      this.createScene(); // 创建场景
      this.createMesh(); // 创建网格模型
      this.createCube(); // 创建方块
      this.createLight(); // 创建光源
      this.createCamera(); // 创建相机
      this.createRender(); // 创建渲染器
      this.createControls(); // 创建控件对象
      this.render(); // 渲染
    },
    // 创建场景
    createScene() {
      scene = new THREE.Scene();
    },
    // 创建网格模型
    createMesh() {
      this.planeGeometry = new THREE.PlaneGeometry(180, 180); // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff,
      }); // 材质对象Material
      const plane = new THREE.Mesh(this.planeGeometry, planeMaterial);

      // 设置平面位置
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.set(0, 0, 0);
      plane.receiveShadow = true;

      // 平面对象添加到场景中
      scene.add(plane);
    },
    // 创建光源
    createLight() {
      // 创建方向光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
      directionalLight.position.set(-20, 40, 60);
      scene.add(directionalLight);

      // 环境光
      const ambientLight = new THREE.AmbientLight(0x292929);
      scene.add(ambientLight);
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById("container");
      const width = element.clientWidth; // 窗口宽度
      const height = element.clientHeight; // 窗口高度
      const k = width / height; // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000);

      camera.position.set(120, 60, 180); // 设置相机位置
      camera.lookAt(new THREE.Vector3(0, 0, 0)); // 设置相机方向
      scene.add(camera);
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById("container");
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(element.clientWidth, element.clientHeight); // 设置渲染区域尺寸
      renderer.setClearColor(0xeeeeee, 1); // 设置背景颜色
      element.appendChild(renderer.domElement);
    },
    // 更新相机属性
    updateCameraProperties() {
      if (this.cameraType === "PerspectiveCamera") {
        camera = new THREE.PerspectiveCamera(
          this.sliderProperties.PerspectiveCameraParams.params.fov.value, // 视场
          this.sliderProperties.PerspectiveCameraParams.params.aspect.value, // 长宽比
          this.sliderProperties.PerspectiveCameraParams.params.near.value, // 近面
          this.sliderProperties.PerspectiveCameraParams.params.far.value // 远面
        );
        camera.position.set(
          this.sliderProperties.position.params.positionX.value,
          this.sliderProperties.position.params.positionY.value,
          this.sliderProperties.position.params.positionZ.value
        );
        camera.lookAt(
          new THREE.Vector3(
            this.sliderProperties.lookAt.params.lookAtX.value,
            this.sliderProperties.lookAt.params.lookAtY.value,
            this.sliderProperties.lookAt.params.lookAtZ.value
          )
        );
      } else {
        camera = new THREE.OrthographicCamera(
          this.sliderProperties.OrthographicCameraParams.params.left.value, // 左边界
          this.sliderProperties.OrthographicCameraParams.params.right.value, // 右边界
          this.sliderProperties.OrthographicCameraParams.params.top.value, // 上边界
          this.sliderProperties.OrthographicCameraParams.params.bottom.value, // 下边界
          this.sliderProperties.OrthographicCameraParams.params.near.value, // 近面
          this.sliderProperties.OrthographicCameraParams.params.far.value // 远面
        );
        camera.position.set(
          this.sliderProperties.position.params.positionX.value,
          this.sliderProperties.position.params.positionY.value,
          this.sliderProperties.position.params.positionZ.value
        );
        camera.lookAt(
          new THREE.Vector3(
            this.sliderProperties.lookAt.params.lookAtX.value,
            this.sliderProperties.lookAt.params.lookAtY.value,
            this.sliderProperties.lookAt.params.lookAtZ.value
          )
        );
        this.planeGeometry.scale = new THREE.Vector3(20, 20, 20);
      }
    },
    createCube() {
      const cubeGeometry = new THREE.BoxGeometry(4, 4, 4); // 创建几何对象geom

      for (let j = 0; j < this.planeGeometry.parameters.height / 5; j++) {
        for (let i = 0; i < this.planeGeometry.parameters.width / 5; i++) {
          const rnd = Math.random() * 0.75 + 0.25;
          const cubeMaterial = new THREE.MeshLambertMaterial(); // 创建材质对象material
          cubeMaterial.color = new THREE.Color(rnd, 0, 0);
          const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 创建网格对象cube

          cube.position.z =
            -(this.planeGeometry.parameters.height / 2) + 2 + j * 5;
          cube.position.x =
            -(this.planeGeometry.parameters.width / 2) + 2 + i * 5;
          cube.position.y = 2;

          scene.add(cube); // 将网格对象添加到场景
        }
      }
    },
    render() {
      this.updateCameraProperties();
      renderer.render(scene, camera);
      requestAnimationFrame(this.render);
    },
    // 创建控件对象
    createControls() {
      controls = new OrbitControls(camera, renderer.domElement);
    },
  },
};
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>

